<route>
    {
        meta: {
            layout: 'nepu',
            title:'著作'
        }
    }
  </route>
<template>
    <view>
        <a-row>
            <a-input-search  allow-clear v-model:value="params.searchKey" placeholder="请输入名称"
                style="width: 200px; margin-bottom: 10px; margin-right: 50px;"   @search="getList()" />
            <a-button v-isAdmin type="primary" style="margin-bottom: 10px; width: 80px;" @click="showModal(null)">
                <template #icon><plus-outlined /></template>新增
            </a-button>
        </a-row>
        <a-table :loading="loading" :dataSource="dataSource" :columns="columns" bordered>
            <template #bodyCell="{ column, text, record }">
                <template v-if="['workloadMax', 'workloadMin', 'orderNum'].includes(column.dataIndex)">
                    <div>
                        <a-input-number v-if="editableData[record.id]"
                            v-model:value="editableData[record.id][column.dataIndex]" style="margin: -5px 0" />
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>
                <template v-else-if="column.dataIndex === 'operation'">
                    <AntdZh>
                        <div class="editable-row-operations">
                            <span v-if="editableData[record.id]">
                                <a-button type="link" @click="save(record.id)">保存 </a-button>
                                <a-popconfirm title="取消编辑 ?" @confirm="cancel(record.id)">
                                    <a-button type="link">取消</a-button>
                                </a-popconfirm>
                            </span>
                            <span v-else>
                                <a-button v-isAdmin type="link" @click="edit(record.id)">编辑</a-button>
                                <a-popconfirm title="确定删除 ?" @confirm="del(record.id)">
                                    <a-button v-isAdmin type="link" danger>删除</a-button>
                                </a-popconfirm>
                            </span>
                        </div>
                    </AntdZh>
                </template>
            </template>
        </a-table>
        <!-- 新增表单 -->
        <AntdConfirmModal title="新增" ref="modalRef" width="800px" :keepSlot="false" @confirm="insert()">
            <a-form :model="formState" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
                <a-form-item label="著作类型" :rules="[{ required: true, message: '请输入著作类型!' }]"><a-input
                        v-model:value="formState.bookType" /></a-form-item>
                <a-form-item label="著作等级" :rules="[{ required: true, message: '请输入著作等级!' }]"><a-input
                        v-model:value="formState.bookLevel" /></a-form-item>
                <a-form-item label="编码" :rules="[{ required: true, message: '请输入编码!' }]"><a-input
                        v-model:value="formState.code" /></a-form-item>
                <a-form-item label="工作量计算系数" :rules="[{ required: true, message: '请输入工作量计算系数!' }]"><a-input-number
                        style="width:200px" v-model:value="formState.workloadStandard" /></a-form-item>
                <a-form-item label="顺序" :rules="[{ required: true, message: '请输入顺序!' }]"><a-input-number style="width:200px"
                        v-model:value="formState.orderNum" /></a-form-item>
                <a-form-item label="备注"><a-textarea v-model:value="formState.remark" /></a-form-item>
            </a-form>
        </AntdConfirmModal>
    </view>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import { queryList, updateOne, deleteOne, createOne } from "../../api/nepu_book_dict"
import useApp from '@/hooks'
const { $ } = useApp()
const editableData = reactive({});
const visible = ref(false);
const modalRef = ref(null)
const loading = ref(false)
const edit = key => {
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.id)[0]);
};
const save = key => {
    updateOne(editableData[key]).then(res => {
        $.showToast({
            title: '修改成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })

};
const del = key => {
    deleteOne(key).then(res => {
        $.showToast({
            title: '修改成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })
}
const cancel = key => {
    delete editableData[key];
};
function openUploader() {
    modalRef.value.openModal()
}
const showModal = () => {
    openUploader()
}
const dataSource = ref()
const formState = reactive({
    bookLevel: "",
    bookType: "",
    code: "",
    orderNum: 0,
    remark: "",
    workloadStandard: 0,
})
const params = ref({
    order: "DESC",
    pageNum: 1,
    pageSize: 99,
    searchKey: undefined,
    sortBy: "orderNum"
})
const columns = ref([
    {
        title: '著作类型',
        dataIndex: 'bookType',
    },
    {
        title: '著作等级',
        dataIndex: 'bookLevel',
    },
    {
        title: '工作量计算系数',
        dataIndex: 'workloadStandard',
        width: '20%'
    },
    {
        title: '顺序',
        dataIndex: 'orderNum',
        width: '10%'
    }, {
        title: '操作',
        dataIndex: 'operation',
        width: '15%'
    }
])

function getList() {
    loading.value = true;
    queryList(params.value).then(res => {
        console.log(res)
        dataSource.value = res.content
        loading.value = false;
    })
}
function insert() {
    createOne(formState).then(res => {
        console.log(res)
        modalRef.value.closeModal();
        getList()
    })
}
getList()
</script>